<template>
<!-- 写手端 菜单栏 -->
  <div class="headPortrait">
      <div class="logo">
          <img src="@/assets/img/writer/title.png" >
      </div>
      <div class="cover">
        <el-popover placement="top-start" :width="140" trigger="hover">
          <template #reference>
            <div style="width:140px;display:flex;align-items:center;margin-right:30px;">
                <span style="white-space: nowrap;">{{state.userInfo.nickname}}</span>
                <img  :src="state.userInfo.avatar" alt="">
            </div>
          </template>
          <div  class="selectArr">
              <div class="item" @click="router.push('/login')">退出登陆</div>
              <div class="item" @click="state.dialogVisible=true;state.selectIndex=1;state.dialogTitle='修改信息'">修改信息</div>
              <div class="item" @click="state.dialogVisible=true;state.selectIndex=2;state.dialogTitle='修改密码'">修改密码</div>
          </div>
        </el-popover>

      </div>

      <el-dialog :title="state.dialogTitle" v-model="state.dialogVisible" width="50%" >
          <div v-if="state.selectIndex===1">
              <div class="">
                <div class="inputItem">
                      <span>请输入名字：</span>
                     <el-input  style="width: 220px;" size="small" v-model="state.userInfo.nickname">
                     </el-input>
                </div>
                <div class="inputItem" style="margin-top:10px;">
                      <div style="margin-bottom:10px;">请更换图片：</div>
                      <uploadFile ref="uploadImgRef"   :fileList="state.userInfo.fileList" ></uploadFile>
                </div>
              </div>
          </div>
          <div v-if="state.selectIndex===2">
              <div class="">
                <div class="inputItem">
                      <span>请输入新密码：</span>
                     <el-input  style="width: 220px;" size="small" v-model="state.password">
                     </el-input>
                </div>
              </div>
          </div>
          <template #footer>
            <div style="display:flex; justify-content: center;">
              <el-button @click="state.dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
            </div>
          </template>
      </el-dialog>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import uploadFile from '@/components/uploadFile/uploadFile'

const state = reactive({
    userInfo:{
      nickname:'',
      fileList:[],
      avatar:''
    },
    dialogTitle:'',
    password:'',
    visiableSelectArr:false,
    dialogVisible:false,
    selectIndex: 0,
  });
export default {
  name: 'headPortrait',
  components: {uploadFile},
  setup(props,{emit}) {
      const ctx = getCurrentInstance();
      const _this = ctx.appContext.config.globalProperties
      const router = useRouter();
      const store = useStore();
      async function getUserInfo(){
        await _this.$request({
          url:'/api/pcLogin/get_admininfo'
        }).then(res=>{
          // console.log(res);
          if (res.code==1) {
              state.userInfo.fileList = []
              state.userInfo.avatar =  res.data.avatar
              state.userInfo.nickname = res.data.nickname
              localStorage.userInfo = JSON.stringify(res.data)
              let imgItem = {
                name:'avatar.png',
                url:res.data.avatar
              }
              state.userInfo.fileList.push(imgItem)
          }
        })
      };
      async function submit(){
        let data ;
        let url ;
        if (state.selectIndex===1) {
            let uploadFileListItem = ctx.refs.uploadImgRef.$refs.uploadRef.uploadFiles[0]

            let avatar = uploadFileListItem.response ? uploadFileListItem.response.data.url : uploadFileListItem.url

            let nickName = JSON.parse(localStorage.userInfo).nickname
          if(avatar==state.userInfo.avatar && nickName == state.userInfo.nickname ){
            return state.dialogVisible = false
          }
            url = '/api/pcLogin/change_admin'
            data ={
              nickname : state.userInfo.nickname,
              avatar
            }


        }else if (state.selectIndex===2) {
            if ( state.password.length < 6 ) {
              return _this.$message.error('请输入至少输入6位数密码')
            }
            url = '/api/pcWriter/change_pass'
            data ={
              password : state.password,
            }

        }
         await _this.$request({
                url,
                data
              }).then(res=>{
                if(res.code == 1){
                  state.headEdit=!state.headEdit
                  _this.$message.success(res.msg)
                  if (state.selectIndex===1) {
                    getUserInfo()
                  }
                  state.dialogVisible = false
                }else{
                  _this.$message.error(res.msg)
                }
              })



      }
      onMounted(async()=>{
          await getUserInfo()
      });
      return{
        state,getUserInfo,router,submit
      }
  },
  props: {},
  watch: {},
  methods: {},
  computed: {},
  mounted () {
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog__header{
  display: flex;
  justify-content: center;
}


.headPortrait{
  width: 100%;
  height: 5.3125rem;
  // height: 40vh;
  // overflow: hidden;
  display: flex;
  align-items: center;
  background: #fff;
  .logo{
    margin-left: 2.9375rem;
    img{
      width: 11.0625rem;
      height: 2.5625rem;
    }

  }
  .item{
          height: 50px;
          display: grid;
          color: #4977fc;
          width: 100%;
          place-items: center;
          cursor: pointer;
          font-size: 18px;
        }

  .cover{
      height: 85px;
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      position: relative;
      text
      .selectArr{
        position: absolute;
        top: 92%;
        right: 4%;
        width: 100%;
        transition: all 1s;
        background-color: #fff;
        z-index: 99;
        box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
        border-radius: 4px;
         &::before{
           content: '';
            position: absolute;
            top: -6%;
            right: 15%;
            width: 0;
            height: 0;
            border-bottom: 10px solid #fff;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
          }

      }
      img{
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 50%;
        margin-left: 1rem;
        cursor: pointer;
      }
      span{
        color: #2B2B2B;
        font-weight: 600;
        cursor: pointer;
        letter-spacing: 2px;
        margin-left: 0.625rem;
      }
  }

}
</style>
